<template>
  <el-drawer class="shareDialog" v-bind="$attrs" append-to-body size="33%" direction="btt" :show-close="false" :modal="false" :class="{'visible': $attrs.visible}">
    <div slot="title">Share</div>
    <div class="iconContainer">
      <p class="iconItem" v-for="icon in iconLink" :key="icon.icon" >
        <a  @click="OpenConcat(icon)" class="svgIcon" :title="icon.word">
          <i class="iconfont icon-item" :class="icon.icon" :style="{'color': icon.color}" ></i>
        </a>
        <span>{{icon.title}}</span>
      </p>
    </div>
    <div class="shareDialog-footer" @click="cancle" >Cancel</div>

  </el-drawer>
</template>

<script>
import { productShareNumFunc } from '@/utils/kanban.js'

export default {
  props: {
    closeDialog:Function,
    product: Object,
  },
  data() {
    return{
      iconLink: [
        {icon:'icon-Facebook1_normal', iconHover: 'icon-Facebook1_hover', word:'Facebook', title: 'Facebook', url:'https://www.facebook.com/sharer/sharer.php?u=', color: '#1877F2'},
        {icon:'icon-Twitter1_normal', iconHover: 'icon-Twitter1_hover', word:'Twitter', title: 'Twitter', url:'https://twitter.com/intent/tweet?text=', color: '#1CA1F2' },
        {icon:'icon-Message1_normal', iconHover: 'icon-Message1_hover', word:'Share on Email', title: 'E-mail', url:'mailto:?subject=', color: '#FEBD69'},
        {icon:'icon-Link1_normal', iconHover: 'icon-Link1_hover', word:'Copy Link to Clipboard', title: 'Link', url:'copy'},
      ],
    }
  },
  methods: {
    cancle(){
      this.$emit("closeDialog")
    },
    OpenConcat (icon){
      let that = this
      let url = icon.url
      let location = window.location.href
      let isCopy = url.indexOf('copy') > -1
      let share_way = ''
      if(url.indexOf('facebook') > -1){
        url += location + '&quote=' + this.product.title
        share_way = 'Facebook'
      } else if (url.indexOf('twitter') > -1){
        url+= this.product.title + '&url=' + location
        share_way = 'Twitter'
      } else if(url.indexOf('mailto') > -1) {
        url+= this.product.title + '&body=' + location
        share_way = 'Email'
      } else if (isCopy){
        url = location
        share_way = 'Link'
      }
      if(isCopy){
        this.$copyText(url).then(function () {
          that.$message.success('Link Copied')
        }, function () {
           that.$message.success('Link not copy')
        })
      }else {
        window.open(url)
      }
      productShareNumFunc(share_way, this.product.title)
    },
  }
}
</script>

<style lang="scss">
.shareDialog{
  background-color: rgba(54, 52, 52, 0.2);
  .el-drawer{
    margin-top: 0 !important;
    width: 100%;
    bottom: 0;
    position: absolute;
    margin-bottom: 0;
    height: auto;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    outline: none;
    // transform: translateY(100vh);
    // transition: all .6s;
    .el-drawer__header{
      color: #363434;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      padding: 16px 0 0;
      margin-bottom: 0;
      outline: none;
    }
    .el-drawer__body{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0;
    }
    .el-drawer__footer{
      height: 54px;
      line-height: 54px;
      border-top: 1px solid #F2F1F0;
      color: #363434;
      font-size: 14px;
      text-align: center;
      padding: 0;
    }
    .iconContainer{
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 134px;
      .iconItem{
        position: relative;
        min-width: 72px;
        cursor: pointer;
        text-align: center;
       
        span{
          color: #363434;
          text-align: center;
          font-size: 14px; 
          white-space: nowrap;
          margin-top: 8px;
          display: block;
        }
        .svgIcon{
          position: relative;
          display: inline-block;
          width: 40px;
          height: 40px;
          border: 1px solid #EAEAEA;
          border-radius: 50%;
          line-height: 40px;
          svg{
            width: 100%;
            height: 100%;
          }
          &:focus{
            .svgHover{opacity: 1;}
            .svgNormal{opacity: 0;}
          }
          .svgHover{opacity: 0;position: absolute;left: 0;top: 0;}
          .svgNormal{opacity: 1; }
        }
      
      }
    }
    
  }
  .shareDialog-footer {
    outline: none;
    border-top: 1px solid #EAEAEA;
    text-align: center;
    padding: 18px 0;
    font-size: 14px;
    color: #6D6D6D;
  }

}
</style>